@import './transition.scss';
@import './element.scss';
@import './scrollbar.scss';

:root {
    /*覆盖element-plus :root*/
    --el-color-primary: #24a500;
    --el-color-primary-light-3: #65c04c;
    --el-color-primary-light-5: #91d27f;
    --el-color-primary-light-7: #bde4b2;
    --el-color-primary-light-8: #d3edcc;
    --el-color-primary-light-9: #e9f6e5;
    --el-color-primary-dark-2: #209400;

    /*自定义*/
    --system-menu-background: #f4f4f4;
    --system-menu-text-color: #000;
    --system-menu-active-background: var(--el-color-primary);
    --system-menu-active-text-color: #fff;
    --system-menu-hover-background: var(--el-color-primary-light-5);
}

html, body{margin:0;padding: 0;font-family: Avenir, Helvetica, Arial, sans-serif;font-size:14px;user-select:none;}
a {text-decoration: none;}
a.my-link{
    color:var(--el-color-primary);
    &:hover{color: var(--el-color-primary-dark-2);}
}
.flex {display: flex;}
.center {justify-content: center;align-items: center;text-align: center;}
.w100 {width: 100% !important;}
.h100 {height: 100% !important;}
.vh100 {height: 100vh !important;}
.ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
#app {width: 100%;height: 100vh;}

.my-container{
    display: flex;width:100%;box-sizing: border-box;padding:10px 10px 0 10px;

    .main{display: flex;flex:1;height: 0;}

    .left{
        flex:1;display: flex;flex-direction: column;width:0;padding: 10px;margin: 0 10px 0 0;border: 1px solid #d0d0d0;border-radius: 4px;background-color: #fff;
        
        .add-file-cover{display: flex;flex-direction: column;align-items: center;margin-top:calc(50vh - 160px);font-size:14px;}
        .add-file-cover .my-icon-add-video{color:var(--el-color-primary);font-size:70px;cursor: pointer;}
        .add-file-cover .tip{margin:15px 0;text-align: center;line-height: 24px;}
        .add-file-cover .add-filt-btn-box{display: flex;}
        .add-file-cover .add-filt-btn-box .add-file-btn{width:180px;}
        .add-file-cover .add-filt-btn-box .add-file-btn i{font-size:14px;margin-right:3px;}
        .table-top{padding-bottom:5px;}
        .table-top .el-button{margin:0 12px 5px 0;}
        .table-top .el-button i{font-size:14px;margin-right:3px;}
        .el-table .cell{padding-left:5px!important;padding-right:5px!important;}
        .operate{
            display: flex;justify-content: space-around;align-items: center;
            i{color: var(--el-color-primary);cursor: pointer;}
            i.disabled{color:#ccc;cursor:default;}
            .my-icon-cuo{color:var(--el-color-danger)}
        }

        .table-data-page{width:100%;padding-top: 10px;display: flex;justify-content: center;}
    }
    
    .setting{
        width:230px;margin: 0;border: 1px solid #d0d0d0;border-radius: 4px;background-color: #fff;display: flex;flex-direction: column;overflow: auto;

        .title{font-weight: bold;padding: 10px;}
        .el-form{flex:1;overflow-y: auto;padding: 10px;}
        .el-form-item__label{padding: 0 0 5px 0!important;line-height:30px;}
        .el-form-item__label .my-icon-help{font-size: 14px;}
        .content{width:100%;}
        .content.slider{padding: 0 10px;}
        .content.slider .el-slider__runway{margin:10px 0;}
        .content .el-input-group__append{padding:0 15px;}
        .content .open-folder{font-size:16px;cursor: pointer;}
        .bottom{padding:10px;border-top:1px solid #d0d0d0;}
        .bottom .el-progress{width:100%;margin-bottom: 10px;}
        .bottom .btn-process{width:100%;overflow: hidden;}
    }
}
